<script setup lang="ts">
import { ref, onMounted,watch } from 'vue';
import { useRouter, RouterView, useRoute } from 'vue-router';
import {getReftoken} from '../api/index.js'
const router = useRouter()
const route = useRoute()

const uname = ref<string>('home');
const onChange = async (ind: string) => {
  router.push(ind)
  switch (ind) {
    case '/learn':
      await getReftoken()
      break;
    case '/my': 
      await getReftoken()
      break;
    default:
      break;
  }
}

onMounted(() => {
  uname.value = route.path;
});

watch(() => route.path, (newPath) => {
  uname.value = newPath;
});
</script>

<template>
  <div class="homeview">
    <router-view />
    <van-tabbar v-model="uname" @change="onChange" class="tabbar">
      <van-tabbar-item name="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item name="/cls" icon="list-switching">分类</van-tabbar-item>
      <van-tabbar-item name="/article" icon="newspaper-o">文章</van-tabbar-item>
      <van-tabbar-item name="/learn" icon="records-o">我的学习</van-tabbar-item>
      <van-tabbar-item name="/my" icon="user-circle-o">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss" scoped>
.homeview {
  padding-bottom: 55px;
  .tabbar {
    background-color: #fff;
  }
}
</style>
